<template>
    <div class="tool">
        <div class="mymould_25" style="margin-bottom: 70px">
        <div class="pl10 pr10">
          <div class="myservice pad10">
            <div class="clearfix title">
              <div class="f1">
                <a>
                  <img src="./assets/img/tool.png" />
                </a>
              </div>
              <div class="fr">
                <a>
                  <img src="./assets/img/more.png" />
                </a>
              </div>
            </div>
            <div class="clearfix mt20">
              <div class="f1 mb10 mt10"  v-for="(item,index) in imgList" :key="index" @click="alertHandler(item.id)" style="width: 25%">
                <a class="db ftc pl5 pr5" @click="turnHandler(item.id)">
                  <div class="liimg rela" >

                    <img :src="item.above_image.img_url" alt="">
                  </div>
                  <div class="ft12 ftc ell mt5">{{item.below_text}}</div>
                </a>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);
export default {
  data() {
    return {
      imgList: [],
 
    };
  },
  async mounted() {
    
    let result = await this.$http.get({
      url: "/user/UserCenter.html",
      params: {
        version: '420',
        system: 'wap',
        isWeb: 1,
        distinct_id:
          '96513866273889',
        debug_param:''
      }
    })
    this.imgList = result.list[3].data.items;
  },
  methods:
  {
     alertHandler(id){
     
      if(id==="117"||id==="118"||id==="116"||id==="89"||id==="96"||id==="91"||id==="93"||id==="92"||id==="83"||id==="85"||id==="120") 
     Dialog.alert({
    message: '对不起，网页版暂不支持该功能<br>请下载App体验更多精彩',
    theme: 'round-button',
    confirmButtonColor:'#41c856',
    confirmButtonText:'下载App',
    // lockScroll:'false',
    closeOnClickOverlay:'true',
    
    }).then(() => {
    code=200
  
});
    },
    turnHandler(id){
      if(id==="82") 
      this.$router.push({
        path:'/Service'
      })
      if(id==="103") 
      this.$router.push({
        path:'/presell'
      })
      if(id==="88") 
      this.$router.push({
        path:'/attention'
      })
      if(id==="90") 
      this.$router.push({
        path:'/recruit'
      })
      if(id==="84") 
      this.$router.push({
        path:'/collect'
      })
      if(id==="105") 
      this.$router.push({
        path:'/ticket'
      })
      if(id==="106") 
      this.$router.push({
        path:'/ten'
      })
      if(id==="107") 
      this.$router.push({
        path:'/clause'
      })
    }

    }
  }

  

</script>
<style lang="stylus" scoped>
.pl10 {
  padding-left: 0.1rem;
}
.pr10 {
  padding-right: 0.1rem;
}
.pad10 {
  padding: 0.1rem;
}
.myservice .title img {
  height: 0.16rem;
}

.myservice .liimg img {
  width: 27%;
}

.myservice {
  -webkit-box-shadow: 0.01rem 0.02rem 0.25rem 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0.01rem 0.02rem 0.25rem 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.15rem;
}
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.f1 {
  float: left;
}
.fr {
  float: right;
}
.mb10 {
  margin-bottom: 0.1rem;
}

.mt10 {
  margin-top: 0.1rem;
}
.pl5 {
  padding-left: 0.05rem;
}

.pr5 {
  padding-right: 0.05rem;
}
.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ftc {
  text-align: center;
}
.block, .db {
  display: block;
}
.rela {
  position: relative;
}
.ft12 {
  font-size: 0.12rem;
}
.mt5 {
  margin-top: 0.05rem;
}
</style>